// 引入 Vue
import Vue from 'vue'

// 引入 Vue-Resource
import VueResource from 'vue-resource'
Vue.use(VueResource)

// 引入 Vue-Router
import VueRouter from 'vue-router'
Vue.use(VueRouter)


// 引入 Mint UI
import MintUI from 'mint-ui'
import { Toast } from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// 引入 mui 样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

// 引入 Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

// 创建 一个 vuex store 实例
const store = new Vuex.Store({
    // 类似于 vm 实例中的 data
    state: {
        // 订单列表  看本地有没有 有的话 拿本地 没有的话 为空
        orderList:  JSON.parse(window.localStorage.getItem('car') || '[]'),
        // 选中的 盒子
        selectedWra: {}
    },
    // 类似于 vm 实例中的 methods
    mutations: {
        // 用于 提示的信息 第一个 参数 state  只能 传过来一个 参数 info => { msg: 'xxx', pos: 'bottom' }
        ToastInfo(state, info) {
            Toast({
                message: info.msg,
                position:  info.pos || 'bottom',
                duration: 5000
            })
        },
        // 添加订单
        addOrder(state, order) {
            console.log('从组件传过来的 订单', order)
            /*  {id: "88", price: 5780, count: 1, selected: true}
            *   1、获取 过来的 订单
            *   2、查找 有没有 和 id 值相同的 订单
            *       -1、有： 增加 count
            *       -2、没有： push 一个对象
            *   3、保存到 本地 localStorage
            * */
            // 校验有没有 这个 订单 默认没有这个订单
            let flag = false
            state.orderList.some(item => {
                // 判断没没有这个 订单
                if (item.id === order.id) {
                    // 有的话 直接 count 叠加
                    console.log('有这个订单')
                    item.count += order.count
                    flag = true
                    return flag
                }
            })
            if (!flag) {
                console.log('没这个订单')
                state.orderList.push(order)
            }
            // 将 订单 列表 持久化 保存到 本地 localStorage
            console.log(state.orderList, '修改过后的 订单列表')
            window.localStorage.setItem('car', JSON.stringify(state.orderList))
            // 提示加入购物车 成功
            this.commit('ToastInfo', { msg: '加入购物车成功', pos: 'middle' })
        },
        // 修改订单
        updateOrder(state, newOrder) {
            /* newOrder { id: xx, count: xxx }
            *  根据 组件 传过来的值 与 订单列表 查找与之对应的 一项
            *  重新赋值 替换里面的 count
            * */
            state.orderList.some(item => {
                var flag = false
                if (item.id === newOrder.id) {
                    // 找到了 与之对应的一项 重新赋值 count
                    item.count = newOrder.count
                    console.log(item, '修改的一项为')
                    // 返回 true 退出 查找
                    return true
                }
            })
            // 将 订单 列表 持久化 保存到 本地 localStorage
            window.localStorage.setItem('car', JSON.stringify(state.orderList))
            // 提示加入购物车 成功
            this.commit('ToastInfo', { msg: '修改成功' })
        },
        // 根据 id  去 删除
        removeById(state, id) {
            var id = parseInt(id)
            var index = state.orderList.findIndex(item => item.id === id)
            state.orderList.splice(index, 1)
            // 将 订单 列表 持久化 保存到 本地 localStorage
            window.localStorage.setItem('car', JSON.stringify(state.orderList))
            // 提示加入购物车 成功
            this.commit('ToastInfo', { msg: '删除成功', pos: 'middle' })
        },
        // 当选中的 改变的时候
        handleSwitchChange(state, id) {
            /*
            *   找到 改变的那一项 赋值 selected 持久化 数据
            * */
            console.log(id, '传过来的  id')
            var item = state.orderList.find(item => item.id === id)
            item.selected = !item.selected
            // 将 订单 列表 持久化 保存到 本地 localStorage
            window.localStorage.setItem('car', JSON.stringify(state.orderList))
        }
        /*      Error！ ☆☆☆☆☆ TODO
            handleSwitchChange(state, id) {
            /!*
            *   找到 改变的那一项 赋值 selected 持久化 数据
            * *!/
            console.log(id, '传过来的  id')
            console.log(state.selectedWra.id, '选中盒子里面的 id 是 否 选中')
            var item = state.orderList.find(item => item.id === id)
            console.log(item, 'item 列表')
            item.selected = state.selectedWra.id
            console.log(item, 'item 列表')
            // 将 订单 列表 持久化 保存到 本地 localStorage
            // window.localStorage.setItem('car', JSON.stringify(state.orderList))
        }*/
    },
    // 类似于 vm 实例中的 computed
    getters: {
        // 获取 选中所有 商品的 数量
        getAllCount(state) {
            var count = 0
            state.orderList.forEach(item => {
                // 判断 item 是否 为 选中 再 加入
                // 没有 选中 跳过
                if (!item.selected) return
                count += item.count
            })
            return count
        },
        // 获取 选中所有 商品的 价格
        getAllMoney(state) {
            var money = 0
            state.orderList.forEach(item => {
                // 判断 item 是否 为 选中 再 加入
                // 没有 选中 跳过
                if (!item.selected) return
                money += parseInt(item.count) * parseInt(item.price)
            })
            return money
        },
        // 获取 购物车 选购的商品 数量
        getShopCarCount(state) {
            var count = 0
            state.orderList.forEach(item => {
                count += item.count
            })
            return count
        },
        // 获取 商品 是否选中 { id: Boolean }
        getSelectedAll(state) {
            state.orderList.forEach(item => {
                state.selectedWra[item.id] = item.selected
            })
            console.log(state.selectedWra, '选中盒子')
            return state.selectedWra
        }
    }
})

// 引入 moment 时间化 插件
import moment from 'moment'

// 引入 app 组件
import app from './App.vue'

// 引入 router 组件
import router from './router.js'

// 设置 vue-resource 的 域名
Vue.http.options.root = 'http://www.liulongbin.top:3005'
// 设置 post  参数
Vue.http.options.emulateJSON = true;
// 设置 全局 时间格式 过滤器
Vue.filter('timeFormat', (dataStr, pattern = 'YYYY-MM-DD:HH:mm:ss') => {
    return moment(dataStr).format(pattern)
})

const vm = new Vue({
    el: '#app',
    // 设置 app 为 入口 模板
    render: c => c(app),
    // 设置 路由
    router,
    // 设置 vuex
    store
})



